<template>
  <div class="loginregister">
    <!-- 注册头部 -->
    <div class="nav">
      <van-icon name="arrow-left" />
    </div>

    <!-- 注册表单 -->
    <!-- 登入表单 -->
    <form action="#">
      <h3 class="title">用户注册</h3>
      <div>
        <p class="tel">
          <input
            type="text"
            placeholder="请输入手机号"
            v-model="phoneValue"
            @blur="handleblur"
          />
          <span>{{ msg1 }}</span>
        </p>
        <p class="verify">
          <input
            type="text"
            v-model="yzmValue"
            @blur="yzmblur"
            placeholder="请输入验证码"
          />
          <button type="button" @click="OnClick">发送验证码</button>
          <span>{{ msg3 }}</span>
        </p>
      </div>
      <van-dialog v-model:show="show" title="验证码" show-cancel-button>
        <template #default>
          <p style="text-align: center; line-height: 80px">{{ msg2 }}</p>
        </template>
      </van-dialog>
      <div class="but">
        <van-button type="primary" :color="color" @click="SigninClick"
          >注册</van-button
        >
        <p class="but-bottom">
          <span class="b-left" @click="JumpClick">用户登入</span>
          <span class="b-right">收不到验证码</span>
        </p>
      </div>
    </form>
    <!-- 页脚 -->
    <div class="login-bottom">
      <p>第三方登入</p>
      <ul class="b-list">
        <li><img src="../assets/LoginImg/1.webp" alt="" /><span>微信</span></li>
        <li><img src="../assets/LoginImg/2.webp" alt="" /><span>QQ</span></li>
        <li><img src="../assets/LoginImg/3.webp" alt="" /><span>微博</span></li>
      </ul>
    </div>
  </div>
</template>

<script>
import http from "../utils/api";
// import { reactive } from "vue";
import { ref } from "vue";
import { Dialog } from "vant";
import router from "../router";
export default {
  setup() {
    const phoneValue = ref("");
    const yzmValue = ref("");
    const msg1 = ref("");
    const msg2 = ref("");
    const msg3 = ref("");
    const color = ref("#dfdfdf");
    const show = ref(false);
    // 采用标记法实现登录
    let telflog = false;
    let yzmflog = false;
    let yzmblurflog = false;

    // 输入框失去焦点之后触发
    let res1 = null;
    const handleblur = () => {
      var reg = /^1[3456789]\d{9}$/;
      let str = phoneValue.value;
      // 判断输入是否为空
      if (str !== "") {
        // 判断输入号码是否满足长度
        if (str.length === 11) {
          // 正则判断手机号格式
          if (reg.test(Number(str))) {
            http.RegisterPhoneExist({ phone: phoneValue.value }).then((res) => {
              // 判断status的值是否存在，0表示不存在,并且发送验证码"6666"，1表示存在
              res1 = res;
              if (res.data.status === 0) {
                Dialog.alert({
                  // 存在是弹出提示
                  message: "用户不存在，请继续注册",
                });
                telflog = true;
              } else {
                // 用户不存在时提示用户注册,确认是跳转页面
                Dialog.alert({
                  message: "用户存在，请登录",
                  closeOnPopstate: false,
                }).then(() => {
                  router.push("/login");
                });
                telflog = false;
              }
            });
            msg1.value = "";
          } else {
            msg1.value = "手机号不正确";
            telflog = false;
          }
        } else {
          msg1.value = "号码长度不正确";
          telflog = false;
        }
      } else {
        msg1.value = "手机号不能为空";
        telflog = false;
      }
    };

    // 输入号码以后才能获取res1的数据，点击发送验证码之后获得验证码
    const OnClick = () => {
      // 先判断是否获取到了res1
      if (res1 !== null) {
        if (res1.data.status === 0) {
          // 点击1s以后弹出验证码框
          setTimeout(() => {
            show.value = true;
            msg2.value = res1.data.yzm;
            yzmflog = true;
          }, 1000);
        }
      }
    };

    // 验证码输入失去焦点触发
    let res2 = null;
    const yzmblur = () => {
      // 判断验证码不为空
      if (yzmValue.value !== "") {
        // 判断是否获取验证码
        if (res1 !== null) {
          http.RegistergetApi({ yzm: yzmValue.value }).then((res) => {
            // 状态码0表示注册成功,返回token(值: 12345), 状态码1表示注册失败, 状态码2表示验证码错误
            if (res.data.status === 0) {
              msg3.value = "验证码通过";
              color.value = "#f00";
              yzmblurflog = true;
            } else if (res.data.status === 1) {
              msg3.value = "注册失败";
            } else {
              msg3.value = "验证码错误";
            }
          });
        } else {
          msg3.value = "请先获取验证码";
          yzmblurflog = false;
        }
      } else {
        msg3.value = "验证码不能为空";
        yzmblurflog = false;
      }
    };

    // 注册事件
    const SigninClick = () => {
      if (telflog === true && yzmflog === true && yzmblurflog === true) {
        // 当标记都通过时，注册成功时点击注册时在本地存储中添加token值
        http.RegistergetApi({ yzm: yzmValue.value }).then((res) => {
          const token = res.data.token;
          router.push("/main/store");
          // 注册成功时将token值填入localstorage
          localStorage.setItem("token", token);
        });
      }
    };

    // 点击跳转
    const JumpClick = () => {
      router.push("/login");
    };
    return {
      phoneValue,
      msg1,
      handleblur,
      msg2,
      msg3,
      res1,
      res2,
      OnClick,
      show,
      telflog,
      yzmflog,
      SigninClick,
      yzmValue,
      yzmblurflog,
      yzmblur,
      color,
      JumpClick,
    };
  },
};
</script>

<style lang="less">
.loginregister {
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 50px;
    width: 100%;
    background-color: #fff;
    .van-badge__wrapper {
      display: inline-block;
      margin-left: 20px;
      line-height: 50px;
    }
  }
  form {
    width: 100%;
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 100px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .van-popup--center {
      van-dialog__content {
        height: 50px;
        background-color: red;
      }
    }
    .title {
      width: 100%;
      line-height: 25px;
      font-size: 24px;
      text-align: center;
      margin-bottom: 20px;
    }
    .verify {
      width: 300px;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #e9e9e9;
      margin-bottom: 25px;
      input {
        border: 0;
        width: 200px;
        height: 100%;
        font-size: 20px;
        color: #979797;
      }
      button {
        width: 100px;
        line-height: 45px;
        background-color: #00f;
        color: #fff;
        border-radius: 10px;
        font-size: 15px;
      }
      span {
        display: block;
        line-height: 20px;
        font-size: 14px;
        text-align: center;
        color: #f00;
      }
    }
    .tel {
      width: 300px;
      height: 50px;
      border-bottom: 1px solid #e9e9e9;
      margin-bottom: 20px;
      input {
        border: 0;
        width: 100%;
        height: 100%;
        font-size: 20px;
        color: #979797;
      }

      span {
        display: block;
        line-height: 20px;
        font-size: 14px;
        text-align: center;
        color: #f00;
      }
    }
    .but {
      button {
        width: 300px;
        height: 50px;
        border-radius: 5px;
        border: 0;
        color: #fff;
        font-weight: 900;
        font-size: 18px;
      }
      .but-bottom {
        width: 300px;
        height: 20px;
        line-height: 20px;
        font-size: 15px;
        margin-top: 10px;
        .b-left {
          float: left;
          color: #3e86fa;
        }
        .b-right {
          float: right;
          color: #a1a1a1;
        }
      }
    }
  }
  .login-bottom {
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    p {
      text-align: center;
      font-size: 15px;
      color: #a5a5a5;
      margin-bottom: 15px;
    }
    .b-list {
      display: flex;
      justify-content: space-around;
      li {
        font-size: 15px;
        line-height: 18px;
        span {
          display: inline-block;
          margin-left: 8px;
        }
        img {
          width: 22px;
          height: 18px;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>
